<!-- 手机登录输入框 -->
<template>
  <div class="login_phone">
    <!-- form -->
    <el-form :model="phoneForm" ref="formRef" :rules="rules" label-width="80px">
      <!-- phone -->
      <el-form-item label="手机号:" prop="phone">
        <el-input v-model.trim.number="phone" clearable placeholder="如:17709674327" />
      </el-form-item>
      <!-- verifyCode -->
      <el-form-item label="验证码:" prop="verifyCode">
        <div class="get_code">
          <el-input v-model.trim="verifyCode" type="verifyCode" placeholder="6位数字或字母" />
          <send-code-btn :isActiveSendCode="isActiveSendCode"  @sendCode="handleSendCode"></send-code-btn>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, toRefs,computed } from 'vue'
import { rules } from '../config/phone.config'
import SendCodeBtn from '@/base-ui/send-code-btn/index.vue'
import { ElForm, ElMessage } from 'element-plus'
import { useStore } from 'vuex'
const store = useStore()
const phoneForm = reactive({
  phone: '',
  verifyCode: ''
})
const { phone, verifyCode } = toRefs(phoneForm)
const isActiveSendCode = computed(()=> phone.value.length<11)
const formRef = ref<InstanceType<typeof ElForm>>()
// 获取验证码
const handleSendCode = () => {
  // 调用获取验证码接口
 if(phone.value!=''){
     formRef.value?.validate((valid) => {
        if (!valid) return
        // 通过验证后才调用接口
      store.dispatch('login/getVerifyCodeAction')
     })

 }
}

// 提交
const loginAction = () => {
  if (!formRef.value) return
  formRef.value?.validate((valid) => {
    if (!valid) return
    // 调用登录逻辑
    store.dispatch('login/loginPhoneAction', phoneForm)
    resetForm()
  })

}

// 重置
const resetForm = () => {
  if (!formRef.value) return
  formRef.value?.resetFields()
}
defineExpose({
  loginAction,
  resetForm
})
</script>
<style lang="less" scoped>
.get_code {
  display: flex;
}
</style>
